<template>
    <div>
        <!-- <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 基础表格
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>-->
        <div class="container">
            <div class="handle-box">
                <el-button
                    type="primary"
                    icon="el-icon-delete"
                    class="handle-del mr10"
                    @click="delAllSelection"
                >批量删除</el-button>
                <!-- <el-select v-model="query.address" placeholder="地址" class="handle-select mr10">
                    <el-option key="1" label="广东省" value="广东省"></el-option>
                    <el-option key="2" label="湖南省" value="湖南省"></el-option>
                </el-select>-->
                <!-- <el-input v-model="query.name" placeholder="用户名" class="handle-input mr10"></el-input> -->
                <!-- <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button> -->
 <el-button type="success" icon="el-icon-circle-plus-outline"
                  @click.prevent="addRow()">新增</el-button>
            </div>
            <el-row style="margin:0 0 10px 0">
                <el-col :span="4">
                    <el-date-picker
                        type="date"
                        placeholder="开始填报时间"
                        v-model="form.date1"
                        value-format="yyyy-MM-dd"
                        style="width: 253px;"
                    ></el-date-picker>
                </el-col>
                <el-col :span="4">
                    <el-date-picker
                        type="date"
                        placeholder="完成填报时间"
                        v-model="form.date2"
                        value-format="yyyy-MM-dd"
                        style="width: 253px;"
                    ></el-date-picker>
                </el-col></el-row>
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <template v-for="(item,index) in tableHead">
                    <el-table-column :prop="item.porp" :label="item.label" :key="index"></el-table-column>
                </template>

                <!-- <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
                <el-table-column prop="name" label="井号"></el-table-column>
                <el-table-column prop="ZBTR" label="填报日期">  </el-table-column>
                <el-table-column prop="informant" label="填报人" > </el-table-column>
                <el-table-column prop=" W_depth" label="井深(m)"></el-table-column>
                <el-table-column prop="horizon" label="层位" >  </el-table-column>
                <el-table-column prop="Penetration" label="日进尺(m)"></el-table-column>
                <el-table-column prop="M_C_footage" label="月累计进尺(m)"></el-table-column>
                <el-table-column prop="submitstate" label="提交状态" ></el-table-column>-->

                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            @click="handleEdit(scope.$index, scope.row)"
                        >详细信息</el-button>
                        <el-button
                            type="text"
                            icon="el-icon-delete"
                            class="red"
                            @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="详细信息" :visible.sync="editVisible" width="80%">
            <el-form ref="form" :model="form" label-width="120px " style="padding-left:20%">
                <el-tag style="margin:40px 0 20px 0">基本信息</el-tag>

                <el-row>
                    <el-col :span="5" style="margin-right:10px;">
                        <el-form-item label="井号">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" style="margin-right:10px;">
                        <el-form-item label="填报日期">
                            <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model="form.date1"
                                value-format="yyyy-MM-dd"
                                style="width:100%"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>

                    <el-col :span="5" style="margin-right:10px">
                        <!-- <el-form-item label="井型"> -->
                        <!-- <el-cascader :options="options" v-model="form.options"></el-cascader> -->
                        <!-- </el-form-item> -->

                        <el-form-item label="填报人">
                            <el-select v-model="form.region" placeholder="请选择" style="width:100%">
                                <el-option label="江汉油田" value="江汉油田"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="5" style="margin-right:10px">
                        <!-- <el-form-item label="井型"> -->
                        <!-- <el-cascader :options="options" v-model="form.options"></el-cascader> -->
                        <!-- </el-form-item> -->

                        <el-form-item label="设计井深(m)">
                            <el-select v-model="form.region" placeholder="请选择" style="width:100%">
                                <el-option label="江汉油田" value="江汉油田"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" style="margin-right:10px;">
                        <el-form-item label="设计完钻层位">
                            <el-select v-model="form.region" placeholder="请选择" style="width: 100%;">
                                <el-option label="江汉油田" value="江汉油田"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" style="margin-right:10px">
                        <el-form-item label="钻达井深">
                            <el-select v-model="form.region" placeholder="请选择" style="width:100%">
                                <el-option label="江汉油田" value="江汉油田"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="5" style="margin-right:10px;">
                        <el-form-item label="钻达层位">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" style="margin-right:10px;">
                        <el-form-item label="日进尺(m)">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="5" style="margin-right:10px">
                        <!-- <el-form-item label="井型"> -->
                        <!-- <el-cascader :options="options" v-model="form.options"></el-cascader> -->
                        <!-- </el-form-item> -->

                        <el-form-item label="月累计进尺(m)">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="岩性描述">
                    <!-- <el-input v-model="form.text"></el-input> -->
                    <el-input
                        type="textarea"
                        rows="5"
                        v-model="form.LithologyDesc"
                        style=" width:60%"
                    ></el-input>
                </el-form-item>

                <el-tag style="margin:40px 0 20px 0">钻井工作内容</el-tag>
                <el-table
                    :data="tableData2"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
                    style="width:65%"
                >
                    <el-table-column type="selection" width="55" align="center"></el-table-column>
                    <template v-for="(item,index) in tableHead2">
                        <el-table-column :prop="item.porp" :label="item.label" :key="index"></el-table-column>
                    </template>
                    <!-- <el-table-column label="操作" width="180" align="center">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)"
                            >详细信息</el-button>
                            <el-button
                                type="text"
                                icon="el-icon-delete"
                                class="red"
                                @click="handleDelete(scope.$index, scope.row)"
                            >删除</el-button>
                        </template>
                    </el-table-column> -->
                </el-table>

                <el-tag style="margin:40px 0 20px 0">当日时效分析</el-tag>

                <el-form-item label="分段作业项目">
                    <el-select v-model="form.region" placeholder="请选择" style="width:233px">
                        <el-option label="江汉油田" value="江汉油田"></el-option>
                    </el-select>
                </el-form-item>

                <el-row align="center" style="margin:0px 124px 0px -165px">
                    <el-col :span="4" style="margin-right:5px;">
                        <el-form-item label="纯钻">
                            <el-input v-model="form.name" style=" width:100%;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" style="margin-right:5px;">
                        <el-form-item label="扩划眼">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4" style="margin-right:5px">
                        <!-- <el-form-item label="井型"> -->
                        <!-- <el-cascader :options="options" v-model="form.options"></el-cascader> -->
                        <!-- </el-form-item> -->

                        <el-form-item label="接单根">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" style="margin-right:5px">
                        <!-- <el-form-item label="井型"> -->
                        <!-- <el-cascader :options="options" v-model="form.options"></el-cascader> -->
                        <!-- </el-form-item> -->

                        <el-form-item label="循环">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" style="margin-right:5px">
                        <!-- <el-form-item label="井型"> -->
                        <!-- <el-cascader :options="options" v-model="form.options"></el-cascader> -->
                        <!-- </el-form-item> -->

                        <el-form-item label="起下钻">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row style="margin:0px 124px 0px -165px">
                    <el-col :span="4" style="margin-right:5px;">
                        <el-form-item label="测井">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" style="margin-right:5px;">
                        <el-form-item label="固井">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4" style="margin-right:5px">
                        <!-- <el-form-item label="井型"> -->
                        <!-- <el-cascader :options="options" v-model="form.options"></el-cascader> -->
                        <!-- </el-form-item> -->

                        <el-form-item label="换钻头">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" style="margin-right:5px">
                        <!-- <el-form-item label="井型"> -->
                        <!-- <el-cascader :options="options" v-model="form.options"></el-cascader> -->
                        <!-- </el-form-item> -->

                        <el-form-item label="辅助">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" style="margin-right:5px">
                        <!-- <el-form-item label="井型"> -->
                        <!-- <el-cascader :options="options" v-model="form.options"></el-cascader> -->
                        <!-- </el-form-item> -->

                        <el-form-item label="修理">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row style="margin:0px 124px 0px -165px">
                    <el-col :span="4" style="margin-right:5px;">
                        <el-form-item label="复杂">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" style="margin-right:5px;">
                        <el-form-item label="事故">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4" style="margin-right:5px">
                        <!-- <el-form-item label="井型"> -->
                        <!-- <el-cascader :options="options" v-model="form.options"></el-cascader> -->
                        <!-- </el-form-item> -->

                        <el-form-item label="组织停工">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" style="margin-right:5px">
                        <!-- <el-form-item label="井型"> -->
                        <!-- <el-cascader :options="options" v-model="form.options"></el-cascader> -->
                        <!-- </el-form-item> -->

                        <el-form-item label="自然停工">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" style="margin-right:5px">
                        <!-- <el-form-item label="井型"> -->
                        <!-- <el-cascader :options="options" v-model="form.options"></el-cascader> -->
                        <!-- </el-form-item> -->

                        <el-form-item label="其他(不计时效)" class="redItem">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div style="width:70%">
                    <el-divider style="width:70%"></el-divider>
                </div>
                <el-row style="margin:0px 124px 0px -165px">
                    <el-col :span="4" style="margin-right:5px;">
                        <el-form-item label="纯钻">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" style="margin-right:5px;">
                        <el-form-item label="扩划眼">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4" style="margin-right:5px">
                        <!-- <el-form-item label="井型"> -->
                        <!-- <el-cascader :options="options" v-model="form.options"></el-cascader> -->
                        <!-- </el-form-item> -->

                        <el-form-item label="接单根">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" style="margin-right:5px">
                        <!-- <el-form-item label="井型"> -->
                        <!-- <el-cascader :options="options" v-model="form.options"></el-cascader> -->
                        <!-- </el-form-item> -->

                        <el-form-item label="循环">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" style="margin-right:5px">
                        <!-- <el-form-item label="井型"> -->
                        <!-- <el-cascader :options="options" v-model="form.options"></el-cascader> -->
                        <!-- </el-form-item> -->

                        <el-form-item label="起下钻">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row style="margin:0px 124px 0px -165px">
                    <el-col :span="4" style="margin-right:5px;">
                        <el-form-item label="测井">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" style="margin-right:5px;">
                        <el-form-item label="固井">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4" style="margin-right:5px">
                        <!-- <el-form-item label="井型"> -->
                        <!-- <el-cascader :options="options" v-model="form.options"></el-cascader> -->
                        <!-- </el-form-item> -->

                        <el-form-item label="换钻头">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" style="margin-right:5px">
                        <!-- <el-form-item label="井型"> -->
                        <!-- <el-cascader :options="options" v-model="form.options"></el-cascader> -->
                        <!-- </el-form-item> -->

                        <el-form-item label="辅助">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" style="margin-right:5px">
                        <!-- <el-form-item label="井型"> -->
                        <!-- <el-cascader :options="options" v-model="form.options"></el-cascader> -->
                        <!-- </el-form-item> -->

                        <el-form-item label="修理">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row style="margin:0px 124px 0px -165px">
                    <el-col :span="4" style="margin-right:5px;">
                        <el-form-item label="复杂">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" style="margin-right:5px;">
                        <el-form-item label="事故">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4" style="margin-right:5px">
                        <!-- <el-form-item label="井型"> -->
                        <!-- <el-cascader :options="options" v-model="form.options"></el-cascader> -->
                        <!-- </el-form-item> -->

                        <el-form-item label="组织停工">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" style="margin-right:5px">
                        <!-- <el-form-item label="井型"> -->
                        <!-- <el-cascader :options="options" v-model="form.options"></el-cascader> -->
                        <!-- </el-form-item> -->

                        <el-form-item label="自然停工">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" style="margin-right:5px">
                        <!-- <el-form-item label="井型"> -->
                        <!-- <el-cascader :options="options" v-model="form.options"></el-cascader> -->
                        <!-- </el-form-item> -->

                        <el-form-item label="其他(不计时效)" class="redItem">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <div style="width:70%">
                    <el-divider></el-divider>
                </div>

                <el-row style="margin:0px 124px 0px -165px">
                    <el-col :span="4" style="margin-right:5px;">
                        <el-form-item label="生产时间小计" class="redItem">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" style="margin-right:5px;">
                        <el-form-item label="非生产时间小计" class="redItem">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4" style="margin-right:5px">
                        <!-- <el-form-item label="井型"> -->
                        <!-- <el-cascader :options="options" v-model="form.options"></el-cascader> -->
                        <!-- </el-form-item> -->

                        <el-form-item label="当日时间合计" class="redItem">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-tag style="margin:40px 0 20px 0">测试数据</el-tag>

                <el-row>
                    <el-col :span="5" style="margin-right:10px;">
                        <el-form-item label="测试井深(m)">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" style="margin-right:10px;">
                        <el-form-item label="密度(g/cm3)">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="5" style="margin-right:10px">
                        <!-- <el-form-item label="井型"> -->
                        <!-- <el-cascader :options="options" v-model="form.options"></el-cascader> -->
                        <!-- </el-form-item> -->

                        <el-form-item label="粘度(s)">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="5" style="margin-right:10px;">
                        <el-form-item label="失水(mL)">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" style="margin-right:10px;">
                        <el-form-item label="泥饼(mm)">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="5" style="margin-right:10px">
                        <!-- <el-form-item label="井型"> -->
                        <!-- <el-cascader :options="options" v-model="form.options"></el-cascader> -->
                        <!-- </el-form-item> -->

                        <el-form-item label="初切(Pa)">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="5" style="margin-right:10px;">
                        <el-form-item label="终切(Pa)">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" style="margin-right:10px;">
                        <el-form-item label="电稳定性">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="5" style="margin-right:10px">
                        <!-- <el-form-item label="井型"> -->
                        <!-- <el-cascader :options="options" v-model="form.options"></el-cascader> -->
                        <!-- </el-form-item> -->

                        <el-form-item label="钻井液类别">
                            <el-select v-model="form.region" placeholder="请选择" style="width:233px">
                                <el-option label="江汉油田" value="江汉油田"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="5" style="margin-right:10px;">
                        <el-form-item label="PH">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" style="margin-right:10px;">
                        <el-form-item label="含砂">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="5" style="margin-right:10px">
                        <!-- <el-form-item label="井型"> -->
                        <!-- <el-cascader :options="options" v-model="form.options"></el-cascader> -->
                        <!-- </el-form-item> -->

                        <el-form-item label="油水比">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="5" style="margin-right:10px;">
                        <el-form-item label="测深(m)">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" style="margin-right:10px;">
                        <el-form-item label="方位角(°)">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="5" style="margin-right:10px">
                        <!-- <el-form-item label="井型"> -->
                        <!-- <el-cascader :options="options" v-model="form.options"></el-cascader> -->
                        <!-- </el-form-item> -->

                        <el-form-item label="井斜(°)">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-tag style="margin:40px 0 20px 0">钻井参数</el-tag>

                <el-row>
                    <el-col :span="5" style="margin-right:10px;">
                        <el-form-item label="钻井方式">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" style="margin-right:10px;">
                        <el-form-item label="钻压(Kn)">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="5" style="margin-right:10px">
                        <!-- <el-form-item label="井型"> -->
                        <!-- <el-cascader :options="options" v-model="form.options"></el-cascader> -->
                        <!-- </el-form-item> -->

                        <el-form-item label="钻速(rpm)">
                            <el-input v-model="form.name" style=" width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-tag style="margin:40px 0 20px 0">钻头使用情况</el-tag>
                <el-table
                    :data="tableData3"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
                    style="margin-left:-10%"
                >
                    <el-table-column type="selection" width="55" align="center"></el-table-column>
                    <template v-for="(item,index) in tableHead3">
                        <el-table-column :prop="item.porp" :label="item.label" :key="index"></el-table-column>
                    </template>
                    <!-- <el-table-column label="操作" width="180" align="center">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)"
                            >详细信息</el-button>
                            <el-button
                                type="text"
                                icon="el-icon-delete"
                                class="red"
                                @click="handleDelete(scope.$index, scope.row)"
                            >删除</el-button>
                        </template>
                    </el-table-column>-->
                </el-table>

                <el-tag style="margin:40px 0 20px 0">螺杆使用情况</el-tag>
                <el-table
                    :data="tableData4"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
                    style="margin-left:-10%"
                >
                    <el-table-column type="selection" width="55" align="center"></el-table-column>
                    <template v-for="(item,index) in tableHead4">
                        <el-table-column :prop="item.porp" :label="item.label" :key="index"></el-table-column>
                    </template>
                    <!-- <el-table-column label="操作" width="180" align="center">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)"
                            >详细信息</el-button>
                            <el-button
                                type="text"
                                icon="el-icon-delete"
                                class="red"
                                @click="handleDelete(scope.$index, scope.row)"
                            >删除</el-button>
                        </template>
                    </el-table-column>-->
                </el-table>

                <el-tag style="margin:40px 0 20px 0">其他</el-tag>

                <el-form-item label="工况说明">
                    <!-- <el-input v-model="form.text"></el-input> -->
                    <el-input
                        type="textarea"
                        rows="5"
                        v-model="form.LithologyDesc"
                        style=" width:60%;h"
                    ></el-input>
                </el-form-item>
                <el-form-item label="油气显示">
                    <el-input v-model="form.name" style=" width:50%"></el-input>
                </el-form-item>
                <el-form-item label="钻头程序">
                    <!-- <el-input v-model="form.text"></el-input> -->
                    <el-input
                        type="textarea"
                        rows="5"
                        v-model="form.LithologyDesc"
                        style=" width:60%"
                    ></el-input>
                </el-form-item>

                <el-form-item label="套管程序">
                    <!-- <el-input v-model="form.text"></el-input> -->
                    <el-input
                        type="textarea"
                        rows="5"
                        v-model="form.LithologyDesc"
                        style=" width:60%"
                    ></el-input>
                </el-form-item>

                <el-form-item label="钻具结构">
                    <!-- <el-input v-model="form.text"></el-input> -->
                    <el-input
                        type="textarea"
                        rows="5"
                        v-model="form.LithologyDesc"
                        style=" width:60%"
                    ></el-input>
                </el-form-item>
                <el-form-item label="钻井液处理">
                    <!-- <el-input v-model="form.text"></el-input> -->
                    <el-input
                        type="textarea"
                        rows="5"
                        v-model="form.LithologyDesc"
                        style=" width:60%"
                    ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { fetchData } from '../../api/index';
export default {
    name: 'SCRB',
    data() {
        return {
            query: {
                DC_name: '',
                name: '',
                top_depth: '',
                bottom_depth: '',
                thickness: '',
                text: '',
                pageIndex: 1,
                pageSize: 10
            },
            tableData: [],
            tableHead: [],
            tableData2: [],
            tableHead2: [],
            tableData3: [],
            tableHead3: [],
            tableData4: [],
            tableHead4: [],
            multipleSelection: [],
            delList: [],
            editVisible: false,
            pageTotal: 0,
            form: {},
            idx: -1,
            id: -1
        };
    },

    created() {
        this.getData();
    },
    methods: {
        // 获取 easy-mock 的模拟数据
        getData() {
            fetchData(this.query).then(res => {
                console.log(res);
                this.tableData = res.DailyDrilling;
                this.tableHead = res.DailyDrilling_name;
                this.tableData2 = res.DailyJobContent;
                this.tableHead2 = res.DailyJobContent_name;

                //钻头使用情况表
                this.tableData3 = res.DailyBitCondition;
                this.tableHead3 = res.DailyBitCondition_name;
                //螺杆使用情况表
                this.tableData4 = res.DailyScrewCondition;
                this.tableHead4 = res.DailyScrewCondition_name;
                this.pageTotal = res.pageTotal || 50;
            });
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageIndex', 1);
            this.getData();
        },
        // 删除操作
        handleDelete(index, row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.$message.success('删除成功');
                    this.tableData.splice(index, 1);
                })
                .catch(() => {});
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        delAllSelection() {
            const length = this.multipleSelection.length;
            let str = '';
            this.delList = this.delList.concat(this.multipleSelection);
            for (let i = 0; i < length; i++) {
                str += this.multipleSelection[i].name + ' ';
            }
            this.$message.error(`删除了${str}`);
            this.multipleSelection = [];
        },


                 addRow () {
        var list = {
          rowNum: '',
          address: this.address,
          name: this.name,
          weather: this.weather,
          phone: this.phone,
          date: this.date,
          mdate: this.mdate,
          loveer: this.loveer}
        this.tableData.unshift(list)
      },
        // 编辑操作
        handleEdit(index, row) {
            this.idx = index;
            this.form = row;
            this.editVisible = true;
        },
        // 保存编辑
        saveEdit() {
            this.editVisible = false;
            // this.$message.success(`修改第 ${this.idx + 1} 行成功`);
            this.$set(this.tableData, this.idx, this.form);
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex', val);
            this.getData();
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
